<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('修改课程信息')"/>
        <th:block th:include="include :: bootstrap-fileinput-css"/>
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-course-edit" th:object="${bizCourse}">
                <input name="id" th:field="*{id}" type="hidden">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">课程名称：</label>
                    <div class="col-sm-8">
                        <input name="courseName" th:field="*{courseName}" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">所属学科：</label>
                    <div class="col-sm-8">
                        <input name="subjectId" th:field="*{subjectId}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程封面图片：</label>
                    <div class="col-sm-8">
                        <input name="coverUrl" id="coverUrl" class="form-control" type="hidden" th:field="*{coverUrl}">
                        <input name="host" id="host" class="form-control" type="hidden" th:field="*{host}">
                        <div class="file-loading">
                            <input class="file" type="file" id="file" name="file" data-min-file-count="1"
                                   data-theme="fas">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程学分：</label>
                    <div class="col-sm-8">
                        <select name="courseScore" class="form-control m-b"
                                th:with="type=${@dict.getType('course_score_value')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                    th:field="*{courseScore}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程介绍：</label>
                    <div class="col-sm-8">
                        <textarea name="introduce" maxlength="1000" th:field="*{introduce}" class="form-control"
                                  rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目类型：</label>
                    <div class="col-sm-8">
                        <select name="projectType" class="form-control m-b"
                                th:with="type=${@dict.getType('course_project_type')}">
                            <option value="">请选择</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                    th:field="*{projectType}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目编号：</label>
                    <div class="col-sm-8">
                        <input name="projectNumber" th:field="*{projectNumber}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目负责人：</label>
                    <div class="col-sm-8">
                        <input name="projectLeader" th:field="*{projectLeader}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目负责单位：</label>
                    <div class="col-sm-8">
                        <input name="projectOrg" th:field="*{projectOrg}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程学分类型：</label>
                    <div class="col-sm-8">
                        <select name="courseScoreType" class="form-control m-b"
                                th:with="type=${@dict.getType('course_score_type')}">
                            <option value="">请选择</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                    th:field="*{courseScoreType}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">课程学分编号：</label>
                    <div class="col-sm-8">
                        <input name="scoreNumber" th:field="*{scoreNumber}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">关注度：</label>
                    <div class="col-sm-8">
                        <select name="focusScore" class="form-control m-b"
                                th:with="type=${@dict.getType('course_score_value')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                    th:field="*{focusScore}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">显示顺序：</label>
                    <div class="col-sm-8">
                        <input name="orderNum" th:field="*{orderNum}" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">状态：</label>
                    <div class="col-sm-8">
                        <div class="radio-box">
                            <input type="radio" name="visible" value="0" th:field="*{visible}">
                            <label>显示</label>
                        </div>
                        <div class="radio-box">
                            <input type="radio" name="visible" value="1" th:field="*{visible}">
                            <label>隐藏</label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: bootstrap-fileinput-js"/>
        <script type="text/javascript">
            var prefix = ctx + "biz/course";
            $("#form-course-edit").validate({
                                                focusCleanup: true
                                            });

            function submitHandler() {
                if ($.validate.form()) {
                    $.operate.save(prefix + "/edit", $('#form-course-edit').serialize());
                }
            }


            $("#file").fileinput({
                                     'theme': 'explorer-fas',
                                     'uploadUrl': ctx + "common/upload",
                                     language: 'zh',
                                     allowedFileExtensions: ['jpg', 'gif', 'png'],
                                     dropZoneEnabled: false,
                                     maxFileCount: 1,
                                     autoReplace: true,
                                     initialPreviewAsData: true, // 回显数据设置
                                     overwriteInitial: true,
                                     // previewFileType: ['image'],
                                     initialPreview: [
                                         '[[${bizCourse.coverUrl}]]'
                                     ],
                                     layoutTemplates: {
                                         actionUpload: '',//去除上传预览缩略图中的上传图片
                                         //actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                                         //actionDownload:'' //去除上传预览缩略图中的下载图标
                                         //actionDelete:'', //去除上传预览的缩略图中的删除图标
                                     },
                                     showUploadedThumbs: false,
                                     showUpload: false,
            }).on("filebatchselected", function (event, data) {//选择即上传
                if (!!!data[0]) {
                    $(this).fileinput("upload") // 上传文件
                }
            }).on("fileuploaded", function (event, data, previewId, index) {
                console.log(event)
                console.log(data)
                const result = data.response
                if (+result.code == +web_status.SUCCESS) {
                    $('#coverUrl').val(result.url)
                    $('#host').val(result.host)
                } else {
                    $.modal.alertError(result.msg);
                }
                console.log('图路径:'+$('#host').val()+$('#coverUrl').val())
            })
        </script>
    </body>
</html>